{extend name='layout/default'/}
{block name='main'}
<div id="control">
    {include file='admin/menu' /}
    <div class="rightControl">
        <table class="layui-hide" id="user" lay-filter="user"></table>
        <script type="text/html" id="toolbarDemo">
            <form class="layui-form" lay-filter="tableSearch" style="display: flex;align-items: center">
                <input type="text" lay-affix="clear" name="mobile"
                       placeholder="手机号码 / 电子邮箱" class="layui-input"
                       style="height: 34px;width: 200px;border-radius: 5px">
                <input type="text" lay-affix="clear" name="uid"
                       placeholder="UID" class="layui-input ml"
                       style="height: 34px;width: 200px;border-radius: 5px">
                <button class="layui-btn lay-submit layui-btn-sm ml layui-btn-normal" lay-submit
                        lay-filter="demo-table-search">搜索
                </button>
                <button type="reset" class="layui-btn layui-btn-sm layui-btn-danger">重置</button>
            </form>
        </script>
        <script type="text/html" id="barDemo">
            <div class="layui-clear-space">
                <a class="layui-btn layui-btn-xs layui-bg-cyan" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-xs layui-bg-green" lay-event="file">文件</a>
            </div>
        </script>
        <script>
            layui.use(function () {
                const table = layui.table;
                const form = layui.form;
                // 创建渲染实例
                table.render({
                    elem: '#user',
                    toolbar: '#toolbarDemo',
                    url: '/index/admin/user',
                    method: 'post',
                    height: 'full-140',
                    autoSort: false, // 禁用前端自动排序。
                    limit: 50,
                    width: $(".rightControl").width(),
                    page: {
                        groups: 5
                    },
                    parseData: function (res) {
                        return {
                            "code": 0, //解析接口状态
                            "msg": res.msg, //解析提示文本
                            "count": res.data.total, //解析数据长度
                            "data": res.data.data //解析数据列表
                        };
                    },
                    cols: [[
                        {field: 'uid', fixed: 'left', width: 100, sort: true, align: "center", title: '用户ID'},
                        {field: 'mobile', width: 200, title: '手机/邮箱'},
                        {
                            field: 'status',
                            width: 100,
                            title: '状态',
                            sort: true,
                            align: "center",
                            templet: function (row) {
                                if (row.status === '1') {
                                    return "<b style='color: forestgreen'>正常</b>";
                                } else if (row.status === '2') {
                                    return "<b style='color: red'>禁用</b>";
                                }
                            }
                        },
                        {
                            field: 'info', templet: function (row) {
                                const {total_store = 0} = row.info
                                return formatBytes(total_store);
                            },
                            title: '总空间', align: "center", width: 120
                        },
                        {
                            field: 'info', templet: function (row) {
                                const {use_store = 0} = row.info
                                return formatBytes(use_store);
                            },
                            title: '已用空间', align: "center", width: 120
                        },
                        {
                            field: 'info', templet: function (row) {
                                const {files_num = 0} = row.info
                                return files_num;
                            },
                            title: '文件数', align: "center", width: 120
                        },
                        {field: 'create_time', sort: true, title: '加入时间', align: "center", width: 160},
                        {field: 'update_time', sort: true, title: '更新时间', align: "center", width: 160},
                        {
                            field: 'manager', title: '权限角色', align: "center", width: 100, templet: function (row) {
                                if (row.manager === 1) {
                                    return "<b style='color: red'>管理员</b>";
                                }
                                return "用户"
                            }
                        },
                        {title: '操作', align: "center", width: 120, toolbar: '#barDemo', fixed: 'right'}
                    ]],
                });
                table.on("tool(user)", function (obj) {
                    const {event = '', data} = obj;
                    if (event === 'file') {
                        location.href = "/index/admin/images?uid=" + data.uid;
                    }
                    if (event === 'edit') {
                        layer.open({
                            title:'编辑用户',
                            area:["800px","350px"],
                            content:'/index/admin/user_get?uid='+data.uid,
                            type:2,
                            end: function(){
                                table.reload('user');
                            }
                        })
                    }
                })
                // 触发排序事件
                table.on('sort(user)', function (obj) {
                    // 尽管我们的 table 自带排序功能，但并没有请求服务端。
                    // 有些时候，你可能需要根据当前排序的字段，重新向后端发送请求，从而实现服务端排序，如：
                    table.reload('user', {
                        initSort: obj, // 记录初始排序，如果不设的话，将无法标记表头的排序状态。
                        where: { // 请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                            field: obj.field, // 排序字段
                            order: obj.type // 排序方式
                        }
                    });
                });
                form.on('submit(demo-table-search)', function (data) {
                    const field = data.field; // 获得表单字段
                    // // 执行搜索重载
                    table.reload('user', {
                        page: {
                            curr: 1 // 重新从第 1 页开始
                        },
                        where: field, // 搜索的字段,
                    });
                    form.val('tableSearch', field);
                    $("[type='reset']").click(function () {
                        table.reload('user', {
                            page: {
                                curr: 1 // 重新从第 1 页开始
                            },
                            where: {}, // 搜索的字段,
                        });
                    })
                    return false; // 阻止默认 form 跳转
                });

            });
        </script>
    </div>
</div>
{/block}